<template>
  <div class="homeindex">
    <!-- 头部 搜索 -->
    <header >
          <img src="@/assets/img-index/扫码.png" alt="" class="header-img">
          <p class="header-p">
            <img src="@/assets/img-index/搜索.png" alt="">
             <input type="text" placeholder="复制淘宝商品名称，搜优惠返利">
          </p>
         
          <img src="@/assets/img-index/消息.png" alt="" class="header-img">
    </header>
      <!-- 中部 -->
       <main>
        <!-- 导航栏 -->
         <div>
            <el-segmented v-model="value" :options="options" block />
            <img src="@/assets/img-index/更多.png" alt="">
         </div>
         <!-- 轮播图 -->
          <div class="banner">
             <img src="@/assets/img-index/Banner1.png" alt="">
          </div>
          <!-- 五个选项 -->
          <ul>
            <li><img src="@/assets/img-index/签到领券.png" alt=""></li>
            <li><img src="@/assets/img-index/优淘超市.png" alt=""></li>
            <li><img src="@/assets/img-index/TOP榜单.png" alt=""></li>
            <li><img src="@/assets/img-index/门店到家.png" alt=""></li>
            <li><img src="@/assets/img-index/积分商城.png" alt=""></li>
          </ul>
            <!-- 优淘头条 -->
            <aside>
              <img src="@/assets/img-index/头条.png" alt="">
              <span>距海淘宝库关闭还有10个小时,抓紧剁手啊</span>
            </aside>
            <!-- 四个弹性盒子 -->
            <aside class="box">
               <div class="card">
                  <div class="card-header">
                    <h2>品牌闪购</h2>
                    <span>美的</span>
                  </div>
                  <p style="color: LightSalmon">买微波炉送大米</p>
                  <div class="products">
                    <img src="@/assets/img-index/微波炉.png" alt="微波炉">
                    <img src="@/assets/img-index/大米.png" alt="大米">
                  </div>
                </div>
                  <div class="card">
                  <div class="card-header2">
                    <h2>畅玩3C</h2>
                    <span><img src="@/assets/img-index/live (1).png" alt="live">城市直播节</span>
                  </div>
                  <p style="color: LightSalmon">分享送优惠卷</p>
                  <div class="products">
                    <img src="@/assets/img-index/电脑.png" alt="电脑">
                    <img src="@/assets/img-index/手机.png" alt="大米">
                  </div>
                </div>
              
              <div class="card">
                  <div class="card-header">
                    <h2>热卖榜单</h2>
                    <span class="card3-span">养生</span>
                  </div>
                  <p style="color: LightSalmon">热门养生紫砂茶具</p>
                  <div class="products">
                    <img src="@/assets/img-index/茶具.png" alt="茶具">
                    <img src="@/assets/img-index/插花壶.png" alt="插花壶">
                  </div>
                </div>
           
                 <div class="card">
                  <div class="card-header2">
                    <h2>精选大牌</h2>
                    <span class="card4-span">家电专场</span>
                  </div>
                  <p style="color: LightSalmon">实惠好货上折</p>
                  <div class="products">
                    <img src="@/assets/img-index/吹风机.png" alt="吹风机">
                    <img src="@/assets/img-index/吸尘器.png" alt="吸尘器">
                  </div>
                </div>
            </aside>
       </main>
       <!-- 底部 -->
       <footer>
           <ul>
              <li><img src="@/assets/img-index/首页.png" alt=""></li>
              <li @click="li2"><img src="@/assets/img-index/分类.png" alt=""></li>
              <li @click="li3"><img src="@/assets/img-index/发现.png" alt=""></li>
              <li><img src="@/assets/img-index/购物车.png" alt="" class="img4"></li>
              <li><img src="@/assets/img-index/我的.png" alt=""></li>
         </ul>
       </footer>
  </div>
</template>

<script setup>
import {ref} from 'vue'

import { useRouter } from 'vue-router'

const router = useRouter()
// 导航栏
let value = ref('推荐');
const options = ['推荐', '家电', '食品', '数码', '美妆','配饰'];

// 分类的跳转
const li2 = ()=>{
  router.push({ name: 'HomeClassify' })
}
const li3 = ()=>{
  router.push({ name: 'HomeFine' })
}

</script>

<style >

.homeindex {
  background-image: url("@/assets/img-index/背景.png");
  background-size: cover;  /*替换了100rem*/
  min-height: 100vh;
  background-repeat: no-repeat;
}
.homeindex header{
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 2rem 0 0 0;
}
.homeindex .header-img{
  width: 1.5rem;
  height: 1.5rem;
}
.homeindex .header-p{
  background-color: white;
  width: 15rem;
  border-radius: 1rem;
  line-height: 2rem;
}
.homeindex .header-p img{
  width: 1rem;
  margin-left: 0.7rem;
  height: 1rem;
}
.homeindex .header-p input{
  border: none;
  margin-left: 0.5rem;
  width: 12rem;
  line-height: 2rem;
  outline:none;
}
.homeindex .header-p ::-webkit-input-placeholder {
color: #909090;
font-style: italic;
font-size: 0.7rem;
}

/* 导航栏 */
main div{
  margin-top: 0.3rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 0.3rem 0 0;
}
 main div .el-segmented {
  --el-segmented-bg-color: none;
  --el-segmented-item-selected-bg-color: none;
}
.el-segmented__item-label {
  color: white;
  overflow: hidden;
  font-size: 0.9rem;
}
.el-segmented__item.is-selected * {
  font-weight: bold !important;
  font-size: 1rem !important;
}
.homeindex div img {
  width: 1rem;
  height: 1rem;
  margin-top: 1rem;
}

/* 轮播图 */
main .banner img {
  width: 21rem;
  height: 10rem;
  margin: 0.4rem auto;
}
/* 五个选项 */
main ul {
  margin: 1rem 0; /* 适当调整上下外边距 */
  display: flex;
  justify-content: space-around;
  align-items: center; /* 垂直居中 */
}
main ul li {
  flex: 1; /* 平分宽度 */
  text-align: center; /* 图片居中 */
}
main ul li img {
  width: 70%; /* 控制图片大小 */
  height: auto;
}
/* 头条 */
main aside{
  display: flex;
  align-items: center;
}
main aside img{
  width: 5rem;
  height: 2rem;
  margin-left: 0.8rem;
}
main aside span{
  color: rgb(114, 114, 114);
  font-size: 0.8rem;
  margin-top: 0.8rem;
  margin-left: 0.5rem;
}
main aside span::after{
  content: '>';
  margin-left: 0.5rem;
  font-size: 1rem;
}
/* 四个弹性盒子 */
main .box {
  display: flex;
  justify-content: space-between;
  padding: 0 1rem; /* 左右留白 */
 flex-wrap: wrap;
}
main .box .card {
  display: table-column-group;
  background: white;
  border-radius: 0.7rem;
  padding: 0.5rem;
  box-shadow: 0 0.3rem 0.7rem rgba(0,0,0,0.08);
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
main .box .card .card-header span{
  margin:0 0.5rem ;
  background: #FF3C28; 
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
}
main .box .card .card-header .card3-span{
   margin:0 0.5rem ;
  background: #42b94c; 
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
}
.card p[style*="LightSalmon"] {
  font-size: 0.9rem;
  text-align: left;
}
main .box .card   .products{
   display: flex;
  justify-content: space-around;
  align-items: flex-end; /* 图片底部对齐 */
}
main .box .card   .products img:first-child{
  width: 4rem;
  height:3rem;
  margin-top: 1.6rem;
}
main .box .card   .products img{
  width: 3rem;
  height:4rem;
}

main .box .card .card-header2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.5rem;
}
main .box .card .card-header2 span {
  background: #fc32b8; 
  color: white;
  border-radius: 2rem;
  display: flex;
  align-items: center;
  font-size: 0.7rem;
  height: 1.5rem;
  margin-top: -0rem;
}
main .box .card .card-header2 span img{
  margin-bottom: 1rem;
}
main .box .card .card-header2 span::after{
  content: none;
}
main .box .card .card-header2:last-child{
 margin-top: 1rem;

}
main .box .card .card-header2 .card4-span{
  background: rgb(83, 83, 228);
  padding: 0rem 0.8rem;
}
footer ul{
  height: 3.5rem;
  display: flex;
  justify-content: space-around;
  background: white;
  box-shadow: 0 -0.3rem 0.5rem rgba(0,0,0,0.08);
  align-items: center;
  border-top: 1px solid rgb(218, 211, 211);

}
footer ul li img{
  width: 1.7rem;
  height: 2.5rem;
    cursor: pointer;
}
footer ul li .img4{
  width: 2.5rem;
 height: 2.5rem;
}
</style>